<template>
    <scroller style="width: 750px;min-height: 1500px;border-color:black;border-width: 2px">
        <div class="container" :style="{ height: height }">
            <div class="demo">
                <wxc-minibar title="群聊成员"
                             background-color="#009ff0"
                             text-color="#FFFFFF"
                             @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                             @wxcMinibarRightButtonClicked="minibarRightButtonClick"></wxc-minibar>
            </div>
        </div>
        <div class="head-man">
            <div class="head-man-man">
                <div class="image">
                    <image  style="width:150px;height:150px;border-radius:150px;
                   border-width: 1px;border-color:black;margin-left:0px"
                            src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg">
                    </image>
                </div>
                <div class="image">
                    <image  style="width:150px;height:150px;border-radius:150px;
                   border-width: 1px;border-color:black;margin-left:0px"
                            src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg">
                    </image>
                </div>
                <div class="image">
                    <image  style="width:150px;height:150px;border-radius:150px;
                   border-width: 1px;border-color:black;margin-left:0px"
                            src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg">
                    </image>
                </div>
                <div class="image">
                    <image  style="width:150px;height:150px;border-radius:150px;
                   border-width: 1px;border-color:black;margin-left:0px"
                            src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg">
                    </image>
                </div>
            </div>
        </div>
        <div style="width: 710px;margin-left: 20px;height: 120px;border-color:black;border-width: 1px;">
            <div class="add" >
                <text style="font-size: 80px;font-weight: bold">+</text>
            </div>
            <div class="jian">
                <text style="font-size: 80px;font-weight: bold">-</text>
            </div>
        </div>
        <scroller style="min-height:900px;width:750px">
            <div class="qun-list">
                <text style="font-size: 38px;margin-left:10px;">群名称</text>
            </div>
            <div class="qun-list">
                <text style="font-size: 38px;margin-left:10px;">群链接</text>
            </div>
            <div class="qun-list">
                <text style="font-size: 38px;margin-left:10px;">群公告</text>
            </div>
            <div class="qun-list">
                <text style="font-size: 38px;margin-left:10px;">我的昵称</text>
            </div>
            <div class="qun-list" style="background-color: red; justify-content:center;border-radius: 10px">
                <text style="font-size: 38px;margin-left:10px;color: #ffffff">退出登录</text>
            </div>
        </scroller>

    </scroller >
</template>

<script>
    import { WxcMinibar } from 'weex-ui';
    var navigator = weex.requireModule('navigator');
    var modal = weex.requireModule('modal');
    export default {
        components: { WxcMinibar },
        methods: {
            minibarLeftButtonClick () {
            },
            minibarRightButtonClick () {
                modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
            }
        }
    };
</script>

<style scoped>
   .head-man{
       width: 710px;
       min-height: 200px;
       border-color:black;
       border-width: 1px;
       border-bottom-width: 0px;
       margin-left:20px;
       margin-top: 20px;
       display: flex;
       flex-wrap: wrap;
       flex-direction:row;
       justify-content:left;
   }
   .head-man-man{
       width: 700px;
       min-height: 200px;
       margin-top: 0px;
       display: flex;
       display: -webkit-flex;
       flex-wrap: wrap;
       flex-direction:row;
       justify-content:center;
       align-items: flex-start;
       align-content: flex-start;
       justify-content: space-between;
   }
    .head-man .image{
          color:red;
           width: 150px;
           height:150px;
       margin-top: 10px;
      }
    .add{
     display: flex;
     flex-wrap: wrap;
     flex-direction:row;
     justify-content:center;
     display: -webkit-flex;
     width: 100px;
     height: 100px;
     background-color: #67ff70;
     border-radius: 150px;
     margin-top: 10px;
     margin-left:200px;
 }
    .jian{
        display: flex;
        flex-wrap: wrap;
        flex-direction:row;
        justify-content:center;
        display: -webkit-flex;
        width: 100px;
        height: 100px;
        background-color:#67ff70;
        border-radius: 150px;
        margin-top:-100px;
        margin-left:450px;
    }
    .qun-list{
        width: 710px;
        min-height:120px;
        border-width: 1px;
        border-color:black;
        margin-left: 20px;
        margin-top: 20px;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        flex-direction:row;
        justify-content:left;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        align-items: center;
    }

</style>